<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.red {
		color:red;
	}
	.blue {
		color:blue;
	}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
	$(document).ready(function(){
		$("input[name='uname']").on('blur', function(event){
			// 访问数据库，看用户名是否有！或没有
			// {uname:$(event.target).val()} ==>?   {uname: inputvalue}
			// http://localhost:8080/checkuname.action?uname=tom1
			$.get('checkuname.action', {uname:$(event.target).val()}, function(data){
				// data  {code: 1, msg : '可以注册/不可以注册' }
				if (data.code == 1) { // 成功的时候
					$("form").data('flg', 1)
					$("#chkmsg").removeClass('red').addClass('blue').html(data.msg)
				} else {
					$("form").data('flg', 0)
					$("#chkmsg").removeClass('blue').addClass('red').html(data.msg)
				}

			}, 'json'); // 4个参数
		})
		
		$("form").submit(function(){
			if ($("form").data('flg') == 0) {
				return false;
			}
		});
		
	})

</script>
</head>
<body>
	<form action="regist.action" data-flg="0" method="post">
		<input name="uname" /><span id="chkmsg"></span>
		<input name="password" />
		<input type="submit" value="注册" />
	</form>
	
</body>
</html>